<template>
  <view class="disease-detail">
    <view class="disease-item" v-for="item in diseaseList" :key="item.id">
      <view class="name-box">
        <view class="bar"></view>
        <view class="disease-name">{{ item.name }}</view>
      </view>
      <view class="disease-description">{{ item.description }}</view>
    </view>
  </view>
</template>

<script>
import { getDataBySymptomName } from "@/api";
export default {
  name: "DiseaseDetail",
  data() {
    return {
      diseaseList: [],
    };
  },

  async mounted() {
    let name = this.$scope.options.name;
    // 查询
    let result = await getDataBySymptomName(name);
    this.diseaseList = result.data;
  },
  components: {},
};
</script>

<style lang='scss' scoped>
.disease-detail {
  padding: 40rpx;
  .disease-item {
    margin-bottom: 30rpx;
    .name-box {
      display: flex;
      align-items: center;
      .bar {
        margin-right: 20rpx;
        background: $themeColor1;
        width: 10rpx;
        height: 40rpx;
        border-radius: 88rpx;
      }
      .disease-name {
        font-size: 38rpx;
        font-weight: bold;
      }
    }
    .disease-description {
      margin-top: 20rpx;
      font-size: 30rpx;
    }
  }
}
</style>